<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>count:{{count}}</p>
        <p>doubleCount:{{doubleCount}}</p>
        <p>tripleCount:{{tripleCount}}</p>
        <p>
            <button @click="addCount">count++</button>
        </p>
    </div>
</body>
<script>
    // Vue的两大特征
    // 初始化渲染
    // 响应式

    // Vue的生命周期
    // 1. 初始化渲染  (初始化阶段  模版编译  挂载阶段)
    // 2. 更新阶段 
    // 3. 销毁阶段

    // Vue生命周期钩子函数  => 回调函数
    // 1. 不管是否存在生命周期钩子函数, Vue实例的生命周期都会正常执行
    // 2. 生命周期钩子函数(回调函数), 可以帮助我们查看不同阶段Vue实例的区别,还可以执行一些副作用操作

    var app = new Vue({ // {}
        el: "#app",
        data: {
            count: 1,
        },
        methods: {
            addCount() {
                this.count++
            }
        },
        computed: {
            doubleCount: function () {
                return this.count * 2;
            },
            tripleCount: function () {
                return this.count * 3;
            }
        },
        watch: {
            count: function (newVal, oldVal) {
                console.log("侦听到count发生改变", newVal, oldVal);
            }
        },
        beforeCreate: function () {
            console.log("1. beforeCreate:实例", this);
            console.log("1. beforeCreate:数据", this.count);
            console.log("1. beforeCreate:方法", this.addCount);
            console.log("1. beforeCreate:计算属性", this.doubleCount);
            console.log("1. beforeCreate:$el", this.$el);
        },
        created: function () {
            console.log("2. created:实例", this);
            console.log("2. created:数据", this.count);
            console.log("2. created:方法", this.addCount);
            console.log("2. created:计算属性", this.doubleCount);
            console.log("2. created:$el", this.$el);
        },
        beforeMount: function () {
            console.log("3. beforeMount:实例", this);
            console.log("3. beforeMount:数据", this.count);
            console.log("3. beforeMount:方法", this.addCount);
            console.log("3. beforeMount:计算属性", this.doubleCount);
            console.log("3. beforeMount:$el", this.$el);
            console.log("3. beforeMount:$el内的模版", this.$el.innerHTML);
        },
        mounted: function () {
            console.log("4. mounted:实例", this);
            console.log("4. mounted:数据", this.count);
            console.log("4. mounted:方法", this.addCount);
            console.log("4. mounted:计算属性", this.doubleCount);
            console.log("4. mounted:$el", this.$el);
            console.log("4. mounted:$el内的模版", this.$el.innerHTML);
        },


    })



</script>

</html>